<template>
  <Modal v-model="modal.show" width="350" :title="modal.title">
    <Form ref="formRef" :model="formItem" :rules="ruleValidate" :label-width="70">
      <FormItem label="组" prop="group">
        <Input v-model="formItem.group" placeholder="" style="width: 200px" />
      </FormItem>
      <FormItem label="值" prop="value"><Input v-model="formItem.value" placeholder="" style="width: 200px" />
      </FormItem>
      <FormItem label="文本" prop="text"><Input v-model="formItem.text" placeholder="" style="width: 200px" />
      </FormItem>
      <FormItem label="说明" prop="desc"><Input v-model="formItem.desc" type="textarea" placeholder=""
          style="width: 200px" />
      </FormItem>
    </Form>
    <template #footer>
      <div>
        <Button type="text" @click="closeModal">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </div>
    </template>
  </Modal>
</template>
<script setup>
import http from '@/util/http'
let { proxy } = getCurrentInstance()
const emit = defineEmits(['initList'])
let modal = reactive({ show: false, title: '' })
const formRef = ref(null)

let formItem = reactive({
  enumID: '',
  group: '',
  value: '',
  text: '',
  desc: '',
})

const ruleValidate = {
  group: [{ required: true, message: '请输入', trigger: 'blur' }],
  value: [{ required: true, message: '请输入', trigger: 'blur' }],
  text: [{ required: true, message: '请输入', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入', trigger: 'blur' }],
}
const closeModal = () => {
  modal.show = false
}

const show = (type, data) => {
  formRef.value.resetFields()
  modal.show = true
  formItem.enumID = ''
  if (type == 1) {
    modal.title = '添加字典'
  } else {
    formItem.enumID = data.enumID
    formItem.group = data.group
    formItem.text = data.text
    formItem.value = data.value
    formItem.desc = data.desc
    modal.title = '编辑字典'
  }
}

const handleOk = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      http.post('/Basic/Enum/AddOrUpdate', toRaw(formItem), (response) => {
        if (response.data.flag) {
          emit('initList')
          proxy.$Message.success(response.data.msg)
          modal.show = false
        } else {
          proxy.$Message.error(response.data.msg)
        }
      })
    } else {
      return false
    }
  })
}

defineExpose({
  show,
})
</script>
